<template>
  <div>
    <div>
      <el-button type="primary" @click="addadminFn">添加管理员</el-button>
    </div>
    <!-- 用户列表 -->
    <el-table :data="getcurrentpageData" style="width: 100%">
      <el-table-column label="序号" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; justify-content: center">
            <span style="margin-left: 10px">{{
              (currentPage - 1) * pageSize + scope.$index + 1
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; justify-content: center">
            <span>{{ scope.row.adminname }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="权限" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; justify-content: center">
            <el-tag class="ml-2" :type="scope.row.role == 1 ? '' : 'success'">{{
              scope.row.role == 1 ? '管理员' : '超级管路员'
            }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="Operations" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      v-model:page-size="pageSize"
      background
      layout="prev, pager, next"
      :total="tatalnum"
      v-model:current-page="currentPage"
      :default-page-size="1"
    />
    <!-- 抽屉组件 -->
    <el-drawer v-model="isshowdrawer" direction="rtl">
      <template #header>
        <h4>添加管理员</h4>
      </template>
      <template #default>
        <div>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item prop="adminname" style="display: flex">
              <span>账号:</span>
              <el-input v-model="ruleForm.adminname" type="adminname" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="password">
              <span>密码:</span>
              <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="role">
              <span>角色:</span>
              <el-select v-model="ruleForm.role" class="m-2" placeholder="请选择角色" size="large">
                <el-option label="管理员" value="1" />
                <el-option label="超级管理员" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <span>权限:</span>
              <el-tree
                ref="treeRef"
                :data="newTreeData"
                show-checkbox
                node-key="path"
                :props="defaultProps"
                :default-expand-all="true"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" v-if="showButtonType == 1" @click="add_sure_Fn"
            >确认添加</el-button
          >
          <el-button type="primary" v-else @click="edit_sure_Fn">确认编辑</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script>
//导入接口
import { getadminlist, addadmin, editadmin, deleteadmin } from '@/utils/admin'
//导入路由数组
import { routes } from '@/router'
// console.log(routes)
export default {
  name: '',
  data() {
    return {
      tableData: [], // 账户列表数据
      tatalnum: 0, // 总数据条数
      pageSize: 2, // 每页的数据条数
      currentPage: 1, // 当前页数为1
      isshowdrawer: false, // 是否显示抽屉
      ruleForm: {
        // 表单数据
        adminname: '',
        password: '',
        role: 1,
        checkedKeys: []
      },
      rules: {
        //验证规则
        adminname: [{ validator: this.validateAdminname, trigger: 'blur' }],
        password: [{ validator: this.validatePwd, trigger: 'blur' }]
      },

      //   // 树形菜单数据
      //   {
      //     id: 1,
      //     label: 'Level one 1',
      //     children: [
      //       {
      //         id: 4,
      //         label: 'Level two 1-1',
      //         children: [
      //           {
      //             id: 9,
      //             label: 'Level three 1-1-1'
      //           },
      //           {
      //             id: 10,
      //             label: 'Level three 1-1-2'
      //           }
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     id: 2,
      //     label: 'Level one 2',
      //     children: [
      //       {
      //         id: 5,
      //         label: 'Level two 2-1'
      //       },
      //       {
      //         id: 6,
      //         label: 'Level two 2-2'
      //       }
      //     ]
      //   },
      //   {
      //     id: 3,
      //     label: 'Level one 3',
      //     children: [
      //       {
      //         id: 7,
      //         label: 'Level two 3-1'
      //       },
      //       {
      //         id: 8,
      //         label: 'Level two 3-2'
      //       }
      //     ]
      //   }
      // ],
      treeData: routes[2].children, // 所有的路由菜单项
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      defaultcheckedkeys: [], // 设置默认选中的树形菜单节点(用于编辑回填)
      showButtonType: 1 // 控制显示添加确认还是编辑确认
    }
  },
  computed: {
    // 前端处理分页(一般后端处理分页)
    getcurrentpageData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    },
    // 得到一个新的树形菜单数组(删掉添加轮播图这一项)
    newTreeData() {
      this.treeData[1].children.pop()
      // console.log(111, this.treeData)
      return this.treeData
    }
  },
  created() {
    //console.log('要渲染的树形菜单数组', routes[2].children)
    // 初始化获取用户列表数据
    this.getadminlistFn()
  },
  methods: {
    cancelClick() {
      // 点击取消
    },
    add_sure_Fn() {
      // 点击添加确认
      this.getcheckedkeysArr()
      // 调用添加管理员接口
      addadmin(this.ruleForm).then((res) => {
        // console.log('添加管理员', res)
        if (res.data.code == 200) {
          // 重新获取
          this.getadminlistFn()
          // 隐藏抽屉
          this.isshowdrawer = false
        }
      })
    },
    // 点击添加管理员
    addadminFn() {
      //01: 抽屉显示
      this.isshowdrawer = true
      //02: 设置当前添加按钮显示
      this.showButtonType = 1
      //03: 清空抽屉中的数据
      this.ruleForm.adminname = ''
      this.ruleForm.password = ''
      this.ruleForm.role = ''
      //console.log('树形菜单组件实例', this.$refs.treeRef)  // undefined
      if (this.$refs.treeRef) {
        this.$refs.treeRef.setCheckedKeys([])
      }
    },
    //验证账户的函数
    validateAdminname(rule, value, callback) {
      if (/^\w{2,6}$/.test(value)) {
        // 验证通过
        callback()
      } else {
        callback(new Error('账号有误,请重新输入!!!'))
      }
    },
    //验证密码的函数
    validatePwd(rule, value, callback) {
      if (/^\d{6}$/.test(value)) {
        // 验证通过
        callback()
      } else {
        callback(new Error('密码有误,请重新输入!!!'))
      }
    },
    // 封装获取用户列表的数据接口
    getadminlistFn() {
      getadminlist().then((res) => {
        // console.log(res)
        if (res.data.code == 200) {
          this.tableData = res.data.data
          // console.log(this.tableData)
          // 给分页赋值总数量
          this.tatalnum = this.tableData.length
        }
      })
    },
    // 点击编辑事件处理函数
    handleEdit(scope, row) {
      // console.log('scope', scope)
      // 01: 显示抽屉
      this.isshowdrawer = true
      // 02: 数据回填
      this.ruleForm.adminname = row.adminname
      this.ruleForm.password = row.password
      this.ruleForm.role = row.role
      //03:  显示编辑确认按钮
      this.showButtonType = 2
      // this.ruleForm.checkedKeys = row.checkedKeys
      // defaultcheckedkey 不能直接防止 checkedKeys,官网提示方式的是[path,path,path]
      const checkedpathArr = []
      // console.log('row.checkedKeys', row.checkedKeys)
      row.checkedKeys.forEach((item) => {
        item.children.forEach((item1) => {
          checkedpathArr.push(item1.path)
        })
      })

      // console.log('checkedpathArr', checkedpathArr)
      // 设置默认选中的树形控件子节点
      // this.defaultcheckedkeys = checkedpathArr
      if (this.$refs.treeRef) {
        // console.log('树形菜单组件实例', this.$refs.treeRef)
        // console.log(checkedpathArr)
        this.$refs.treeRef.setCheckedKeys(checkedpathArr)
      }
    },
    edit_sure_Fn() {
      // 点击编辑确认
      //01: 获取编辑确认提交的数据
      this.getcheckedkeysArr()
      // console.log('编辑的参数', this.ruleForm)
      // 02: 调用编辑管理员接口
      editadmin(this.ruleForm).then((res) => {
        // console.log(res)
        if (res.data.code == 200) {
          // 修改成功后, 重新更新用户列表
          this.getadminlistFn()
          // 隐藏抽屉
          this.isshowdrawer = false
        }
      })
    },
    // 获取当前选中的树形菜单子节点
    getcheckedkeysArr() {
      // console.log(this.ruleForm)
      // console.log(this.$refs.treeRef.getCheckedNodes(true))
      // 获取的结构  [{path:'managelist',label:'管理员列表'},{path:'swiperlist',label:'轮播图列表'}], 但是要传递的参数 [{}]
      // 要传递的参数为 [{path:'manage',label:'账户管理',children:[{path:'managelist',label:'管理员列表'}]}]
      const list = this.$refs.treeRef.getCheckedNodes(true)
      // console.log('list', list)
      // console.log('treeData', this.treeData)
      let result = [] // 该数组用来存放最终的结果
      let temparr = [] // 该数组用来去重
      list.forEach((item) => {
        let parent = this.treeData.find((v) => {
          return v.children.some((item1) => {
            return item1.label == item.label
          })
        })
        // console.log('parent', parent)
        // 实现去重
        if (!temparr.includes(parent.label)) {
          // 如果temparr没有该parent.label
          temparr.push(parent.label)
          result.push({
            path: parent.path,
            name: parent.name,
            label: parent.label,
            children: [item]
          })
        } else {
          // 表示parent 有重复的
          result.find((item) => item.label == parent.label).children.push(item)
        }
      })

      //输出 result
      // console.log('result', result)
      this.ruleForm.checkedKeys = result
      // console.log(' this.ruleForm', this.ruleForm)
    },
    handleDelete(index, row) {
      // console.log(index, row)
      deleteadmin({ adminid: row.adminid }).then((res) => {
        // console.log(res)
        if (res.data.code == 200) {
          // 重新更新用户列表
          this.getadminlistFn()
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.el-pagination {
  margin-top: 10px;
}
::v-deep .el-form-item__content {
  margin-left: 0 !important;
  .el-input,
  .el-select {
    width: 80%;
  }
}
</style>